<!--
 * @Author: cest
 * @Date: 2022-08-03 10:22:35
 * @LastEditTime: 2022-08-05 16:28:31
 * @LastEditors: cest
 * @FilePath: /vue3-todo-list/src/components/Item/index.vue
 * @Description: Item
-->
<template lang="pug">
el-checkbox(
  :label="todo.id") {{todo.name}}
  el-button(
    v-if="todo.done"
    class="todo-del-icon"
    type="danger"
    :icon="Delete"
    circle
    @click.stop="deleteEventHandler"
    :data-id="todo.id")
</template>
<script>

import { Delete } from '@element-plus/icons-vue'

import { useStore } from 'vuex'
import { mapHelper } from '@/hooks/useMapper'
import { MAP } from '@/store/modules/todo'

export default {
  name: 'Item',
  props: {
    todo: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: Number,
      default: 0
    }
  },
  setup() {
    const store = useStore()
    const deleteEventHandler = e => {
      console.log('deleteEventHandler e.currentTarget', e.currentTarget.dataset)
      const { id } = e.currentTarget.dataset
      store.commit(mapHelper(MAP.NAMESPACED, MAP.DELETE), { id })
      ElMessage.closeAll()
      ElMessage.success('删除成功')
    }
    return {
      Delete,
      deleteEventHandler
    }
  }
}
</script>
<style lang="stylus" scoped>
@import './stylus'
</style>
